{% extends "global/Page.html" %} {% load otree static %} {% block title %} 投资
{% endblock %}

<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>

{% block content %}
<style>
  /* 设置根属性，利于其他需要设定大小的属性使用rem */
  html {
    font-family: "Hiragino Sans GB", "Microsoft Yahei", arial, \5b8b\4f53,
      "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    font-size: 62.5%;
  }

  /* body的margin自带8px，因此需要清除 */
  body {
    margin: 0;
  }

  /* 很少需要全部属性都设置 */
  * {
    /*该属性让一个盒子大小，符合人的思维。
            width = padding + border + content;
            content = line-height * line-num;*/
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* 去除连接标签下划线和默认颜色 */
  a {
    text-decoration: none;
    color: #333;
  }

  textarea,
  input,
  button {
    outline: none;
  }

  /* 图片自适应 */
  img {
    width: 100%;
  }

  /* 清除浮动 */
  .clear::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 以下为为老旧版本浏览器做的适配 */
  header,
  section,
  footer,
  aside,
  nav,
  article,
  figure {
    display: block;
  }
</style>

<style>
  tr,
  td {
    /* border: 0.1rem solid black; */
    margin: 0rem;
    width: 0.2rem;
  }

  table {
    width: 62.5rem;
    min-height: 50rem;
    margin: 0 0 0 0rem;
    /* border: 0.1rem solid black; */
  }

  div {
    margin: 1.25rem 1.25rem 1.25rem 1.25rem;
  }

  .introduce {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .introduce p {
    font-size: 13px;
    padding: 10px 10px;
  }

  #app {
    width: 845px;
  }

  .chan {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .button {
    float: right;
    margin-top: 18rem;
  }
</style>

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div>
  <div style="float: right; clear: both">
    <div id="app">
      <template>
        <el-alert
          title="注意："
          type="warning"
          description="尊敬的客户，本理财产品有投资风险，不保证本金和收益，可能会因市场变动而导致本金和收益全部损失,您应充分认识投资风险，谨慎投资。"
          show-icon
        >
        </el-alert>
      </template>
    </div>
  </div>

  <div style="text-align: center" class="chan">
    <div style="text-align: left">
      <div>
        <span>B1在公共游戏中投入为</span>
        <span style="margin-left: 5px">{{ b1_in_public }}</span>
      </div>
      <div>
        <span>B2在公共游戏中投入为</span>
        <span style="margin: 0 0 0 5px">{{ b2_in_public }}</span>
      </div>
{#      <span>本轮您准备投资给A（或B）公司</span>#}
      <div class="button">{% next_button %}</div>
      <div>
        <div id="b1" style="display: none">
          {% formfield group.sent_amount_b1 %}
        </div>
        <div id="b2" style="display: none">
          {% formfield group.sent_amount_b2 %}
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");
</style>

<script>
  let b1 = document.getElementById("b1");

  let b2 = document.getElementById("b2");

  let b1_default_value = document.getElementById("id_sent_amount_b1");
  let b2_default_value = document.getElementById("id_sent_amount_b2");

  new Vue({
    el: "#app",
    created() {
      this.$confirm("您要投资给, 是否继续?", "提示", {
        confirmButtonText: "B1",
        cancelButtonText: "B2",
        type: "warning",
      })
        .then(() => {
          b1.style.display = "block";
          b2_default_value.value = "0";
        })
        .catch(() => {
          b2.style.display = "block";
          b1_default_value.value = "0";
        });
    },
  });
</script>
{% endblock %}
